<template>
  <div class="paperInfo" v-if="state.paperInfoVisible">
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
    >
        <el-form-item label="年级" prop="grade">
        <!-- <el-text>{{ ruleForm.grade }}</el-text> -->
          <el-radio-group v-model="ruleForm.grade" @change="gradeChange">
              <el-radio :label='3' >高三</el-radio>
              <el-radio :label='2' >高二</el-radio>
              <el-radio :label='1' >高一</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学科" prop="subject">      
          <el-radio-group v-model="ruleForm.subject" @change="subjectChange">
              <el-radio :label='1' >信息技术</el-radio>
              <el-radio :label='2' >通用技术</el-radio>
              <el-radio :label='3' >职高计算机</el-radio>  
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title"/><el-text size="small" type="warning">如：温州一模高三信息</el-text>
        </el-form-item>
        <el-form-item label="日期" prop="publish_time"> 
          <el-date-picker
              v-model="ruleForm.publish_time"
              type="date"
              label="试卷发布日期"
              placeholder="试卷选择日期"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="YYYY-MM-DD"
              @change="dateChange"
          />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :icon="View" @click="VerifyPaperTitle()">检测试卷标题</el-button>
        </el-form-item>
        <el-form-item label="类型" prop="is_joint">         
            <el-radio-group v-model="ruleForm.is_joint" @change="typeChange">
              <el-radio :label='true'>地市联考</el-radio>
              <el-radio :label='false'>原创/改编</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>           
            <el-button type="primary" ref="submitButton" @click="onAccomplishPaperInfoClick()" :disabled="state.submitButtonDisabled">继续</el-button>        
        </el-form-item>
    </el-form>
  </div>
 
  <div class="questionInfo" v-if="state.questionVisible" >
   <el-text size="small" >{{ ruleForm.title }}</el-text>
    <div class="affix">
      
      <el-affix :offset="60">
        <el-button type="danger" @click="onLinkKnowledgepointClick" text>知识点</el-button>
        <div class="knowledgepointList" v-if="state.knowledgepointListVisible">
          <el-button
            v-for="item in state.knowledgepointList"
            :key="item.name"
            :type="getButtonType(item.id)"
            text
            size="small"
            @click="linkKnowledgeClick(item.id,item.name)"
            >{{ item.name }}</el-button
          >
          <el-button size="small" type="info" @click="closeknowledgepointList">关闭</el-button>
        </div>
      </el-affix>
      <el-affix :offset="60" target=".affix" z-index="1">        
        <el-button type="success" :disabled="state.submitButtonDisabeled" text @click="submitForm" v-loading="state.loading">提交</el-button>         
      </el-affix>
     
      <el-affix :offset="60" target=".affix" z-index="1">
        <el-popover
            placement="right-start"
            :width="300"
            trigger="hover"
          >
          <template #reference>
            <el-button type="warning" text>批量新增题目</el-button>
          </template>
          <div>
              <p>单项选择题：<el-input-number :min="0" :max="60" :step="10" v-model="state.singleChoiceNumber" size="small" /></p>
              <p>多项选择题：<el-input-number :min="0" :max="10" :step="5" v-model="state.multipleChoiceNumber" size="small" /></p>
              <p>是非选择题：<el-input-number :min="0" :max="30" :step="10" v-model="state.trueFalseChoiceNumber" size="small" /></p>
              <p>填空题：<el-input-number :min="0" :max="10" v-model="state.clozeNumber" size="small" /></p>
              <p><el-button type="success" @click="onInsertQuestionsClick">确定</el-button></p>
            </div>
        </el-popover>
      </el-affix>
      <el-affix :offset="60" target=".affix" z-index="1">        
        <el-button type="primary" :disabled="state.submitButtonDisabeled" text @click="showAllQuestionClick">预览</el-button>         
      </el-affix>
    </div>
    <div class="card_questions">
      <div></div>
      <el-card class="box-card" v-for="(item,index) in state.paperQuestionList" :key="index"
        shadow="hover"
        :class="{active:state.currentSelectQuestionIndex==index}"
        @click="selectCardClick(index)"
  
      >
        <template #header>
          <div class="card-header">
              <p>题号:<el-input-number :min="1" :max="100" v-model="item.order" size="small" /></p>              
              <p>知识点：{{ item.knowledgepoint_cn }}</p>            
              <p>库币：<el-input-number :min="1" :max="10" v-model="item.bank_point" size="small" /></p>
              <p>题型：
                <el-select v-model="item.type" class="m-2" placeholder="Select" size="small" @change="onSelectTypeChange(index)">
                  <el-option
                    v-for="option in options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>    
            </p> 
              <div class="demo-rate-block">
                <span class="demonstration">难度</span>
                <el-rate v-model="item.difficulty_level" size="small" />
              </div>
            
          </div>
        </template>
    
            <p>【题干】</p>
            <WangEditor :id="`content${index}`"
              :ref="el => getContentRef(el, index)"
              @getEditorContent="onEditorChange" 
              :father_method="appendImageToContentFromEditor" 
              /> 
            <!-- <el-image v-for="url in item.images" :key="url" :src="url" style="width: 150px;" />   -->
      
            <p>【答案】</p>
            <WangEditor :id="`answer${index}`"
              :ref="el => getAnswerRef(el, index)"
              @getEditorContent="onEditorAnswerChange"
              :father_method="appendImageToAnswerFromEditor" 
            />
            <!-- <el-image v-for="url in item.images_answer" :key="url" :src="url" style="width: 150px;" />   -->
        
            <p>【解析】</p>
            <WangEditor :id="`explain${index}`"
              :ref="el => getExplainRef(el, index)"
              @getEditorContent="onEditorExplainChange"
              :father_method="appendImageToExplainFromEditor" />
        
          <!-- <el-image v-for="url in item.images_explain" :key="url" :src="url" style="width: 150px;" /> -->
        <div style="text-align: right;">
          <el-button :icon="Plus" size="small" @click="addOneQuestionClick(index)" ></el-button>
          <el-button :icon="Delete" size="small" @click="deleteOneQuestionClick(index)" ></el-button>  
        </div>
      </el-card>
    </div>
    <ShowQuestionReadOnlyDialog ref="showManyQuestionReadOnlyDialog" :questionList="state.paperQuestionList" />
  </div>
</template>
<script setup>
  import axios from '@/utils/axios'
  import { useStore } from 'vuex'
  import { EditPen,Document,Download,View,ArrowDown,Plus,Delete} from '@element-plus/icons-vue'
  import { reactive, ref, onMounted, onUnmounted, } from 'vue' 
  import { UploadFilled, Back } from '@element-plus/icons-vue'
  import { localGet, uploadPaperFileServer, convertQuestionFormat, deleteQuestionItem,deepClone} from '@/utils'
  import { ElMessage } from 'element-plus'
  import { useRouter, useRoute} from 'vue-router'
  import WangEditor from '@/components/WangEditor.vue'
  import ShowQuestionReadOnlyDialog from '@/views/ShowQuestionReadOnlyDialog.vue'
  
  const submitButton = ref(null)
  const router = useRouter()
  const route = useRoute()
  const formSize = ref('default')
  const ruleFormRef = ref(null)
  const showQuestionReadOnlyDialog = ref(null)
  const type_dic={1:'选择题', 2:'填空题',3:'多选题',4:'判断题'}
  const showManyQuestionReadOnlyDialog = ref(null)
  const options = [
    {value: 1,label: '单选题',},
    {value: 2,label: '填空题',},
    {value: 3,label: '多选题',},
    {value: 4,label: '判断题',},
  ]
  // 来自网络上的方法,动态生成ref属性，并存入数组refList，便于后期取出
  const contentRefList = ref([]);
  const getContentRef = (el, index) => {
    if (el) {
      contentRefList.value[index] = el; 
    }
  };
  const answerRefList = ref([]);
  const getAnswerRef = (el, index) => {
    if (el) {
      answerRefList.value[index] = el;  
    }
  };
  const explainRefList = ref([]);
  const getExplainRef = (el, index) => {
    if (el) {
      explainRefList.value[index] = el; 
    }
  };

  const ruleForm = reactive({
    title: '',
    description: '略',
    is_joint: 1,
    open_level: 'public',
    score: 50,
    publish_time:'',
    grade:3,
    subject:1,
  })
  const state = reactive({
    showAllQuestionsVisible:false,    //弹窗浏览可视
    submitButtonDisabeled:false,      //提交按钮禁用
    loading:false,                    //加载动画
    knowledgepointListVisible:false,  //知识点
    singleChoiceNumber:0,             //单选题个数
    multipleChoiceNumber:0,           //多选题个数
    trueFalseChoiceNumber:0,          //是非选择题题数
    clozeNumber:0,                    //填空题题数
    token: "",                        //令牌访问后端的凭证
    submitButtonDisabled: false,      //提交后不可用
    paperInfoVisible:true,            //试卷信息
    questionVisible:false,            //试题可见
    currentSelectQuestionIndex:0,     //当前被选中的题目
    paperQuestionList:[],             //试卷题目数组
    subjectId:1,                      //选中的学科
    knowledgepointList:[],            //根据subjectId，后端获取过来的知识点列表
    paperInfo:{id:0},                     //新增试卷情况下的试卷信息
  })
  // 重新从ref对象中获取html文本,修改内容
  const reGetHtmlFromRichEditorRef=()=>{
    console.log('查看题目列表：',state.paperQuestionList)
    console.log('查看refList:', contentRefList)
    for(let i=0;i<contentRefList.value.length;i++){
      state.paperQuestionList[i].content=contentRefList.value[i].getHtmlContent()
      state.paperQuestionList[i].answer=answerRefList.value[i].getHtmlContent()
      state.paperQuestionList[i].explain=explainRefList.value[i].getHtmlContent()
    }
  }
  // 浏览所有的题目
  const showAllQuestionClick=()=>{
    // let questionList=deepClone(state.paperQuestionList)
    // 先重新从富文本编辑器中获取内容，再展示数组
    reGetHtmlFromRichEditorRef()
    showManyQuestionReadOnlyDialog.value.open(state.paperQuestionList)
  }
  // 批量新增题目，自定义函数
  const createOneQuestion=(type, order)=>{
    let question_new = {}
    question_new.type=type
    question_new.type_cn=type_dic[type]
    question_new.content="待修改"
    question_new.answer="待修改"
    question_new.explain="待修改"
    question_new.reference=ruleForm.title
    question_new.publish_time=ruleForm.publish_time
    question_new.bank_point = 1
    question_new.difficulty_level=1
    question_new.order = order
    question_new.knowledgepoint=0
    return question_new
  }
  // 批量新增题目按钮事件
  const onInsertQuestionsClick=()=>{
    if(state.singleChoiceNumber<=0 & state.multipleChoiceNumber<=0 & state.trueFalseChoiceNumber<=0 & state.clozeNumber<=0){
      ElMessage.error("本次没有添加题目！")
      return false
    }
    for(let i=0;i<state.singleChoiceNumber;i++){
      let question_new = createOneQuestion(1,state.paperQuestionList.length+1)     
      state.paperQuestionList.push(question_new)
    }
    for(let i=0;i<state.multipleChoiceNumber;i++){
      let question_new = createOneQuestion(3,state.paperQuestionList.length+1)     
      state.paperQuestionList.push(question_new)
    }
    for(let i=0;i<state.trueFalseChoiceNumber;i++){
      let question_new = createOneQuestion(4,state.paperQuestionList.length+1)     
      state.paperQuestionList.push(question_new)
    }
    for(let i=0;i<state.clozeNumber;i++){
      let question_new = createOneQuestion(2,state.paperQuestionList.length+1)     
      state.paperQuestionList.push(question_new)
    }
    ElMessage.success("添加成功！")
  }
  // 隐藏知识点
  const closeknowledgepointList=()=>{
    state.knowledgepointListVisible=false
  }
  const buttonTypeList = ['primary', 'success', 'info', 'warning', 'danger']
  const getButtonType =(value)=>{    
    return buttonTypeList[value % buttonTypeList.length]
  }
  onMounted(()=>{    
    let { id } = route.query
    let{title}= route.query
    let{publish_time}=route.query
    let { subject_id } = route.query
    if(parseInt(id)>0){
      ruleForm.title=title
      ruleForm.publish_time=publish_time.slice(0,10)
      state.subjectId = parseInt(subject_id)
      ruleForm.subject = state.subjectId
      console.log('读取的subject_id',subject_id)
      initQuestion_supply()
      ElMessage.success('补充题目初始化成功')
      console.log("初始化后",ruleForm)
    }
  })
  // 通过id获取试卷信息，用于显示标题、和填充试题的发布时间
  const getPaperInfo=(id)=>{
    let params={
      id:id,
    }
    axios.get(`/ExaminationPaperViewSet/${id}/`,{params}).then(res => {
      console.log("获取试卷结果：",res)
      if (res.code==200){        
        state.paperInfo= res.data.results
      }else
      if(res.code==1099){
        ElMessage.error('参数错误，获取试卷失败')
        return false
      }else{
        ElMessage.error('服务器错误')
      } 
    })
    .catch((error)=>{
      console.log("error:", error)
    })   
  }
  // 当前位置删除一个题目,并重新调整题目的序号
  const deleteOneQuestionClick=(index)=>{
    state.paperQuestionList.splice(index,1)
    contentRefList.value.splice(index,1)
    answerRefList.value.splice(index,1)
    explainRefList.value.splice(index,1)
    for(index=0;index<state.paperQuestionList.length;index++){
      state.paperQuestionList[index].order = index+1
    }
    // console.log('删除后的题目：', state.paperQuestionList)
    // console.log('删除后contentRefList的值：',contentRefList.value)
    // console.log('删除后answerRefList的值：',answerRefList.value)
    // console.log('删除后explainRefList的值：',explainRefList.value)
    ElMessage.success("删除题目成功")
  }
  // 增加一个空白的题目
  const addOneQuestionClick=(index)=>{
    let question_new = createOneQuestion(1,state.paperQuestionList.length+1)   
    state.paperQuestionList.splice(index+1,0,question_new)
    for(index=0;index<state.paperQuestionList.length;index++){
      state.paperQuestionList[index].order = index+1
    }
    // console.log('新增题后的题目：', state.paperQuestionList)
    // console.log('新增后contentRefList的值：',contentRefList.value)
    // console.log('新增后answerRefList的值：',answerRefList.value)
    // console.log('新增后explainRefList的值：',explainRefList.value)
    ElMessage.success("新增题目成功！")
  }
// 把知识点关联到题目
const linkKnowledgeClick=(knowledgeId,knowledgeName)=>{
  // console.log('知识点选中：',knowledgeId)
  if(state.currentSelectQuestionIndex>=0 && knowledgeId>=1){
    state.paperQuestionList[state.currentSelectQuestionIndex].knowledgepoint=knowledgeId
    state.paperQuestionList[state.currentSelectQuestionIndex].knowledgepoint_cn=knowledgeName
    ElMessage.success("关联知识点成功！")
    return true
  }else
  if(state.currentSelectQuestionIndex<0){
    ElMessage.error("关联知识点失败，请先选择题目")
    return false;
  }else
  if(knowledgeId<1){
    ElMessage.error("关联知识点失败，请先选择正确的知识点")
    return false;
  }
  else{
    ElMessage.error("关联知识点失败")
    return false;
  }
}

  // 题型选择改变后  
  const onSelectTypeChange=(index)=>{
    state.paperQuestionList[index].type_cn=type_dic[state.paperQuestionList[index].type]
    console.log("修改题型",state.paperQuestionList[index].type_cn)
  }
  // 选中学科获取知识点
const handleCommand=(command=1)=>{
    command = parseInt(command)
    state.subjectId = command
    // console.log("下拉设置学科",state.subjectId)
    getKnowledgepointBySubject()
    state.knowledgepointListVisible=true
}
//点击关联知识点按钮事件，后端获取知识点，并显示出来
const onLinkKnowledgepointClick=()=>{
  getKnowledgepointBySubject()
    state.knowledgepointListVisible=true
}
// 获取学科的知识点
const getKnowledgepointBySubject=()=>{
    if(ruleForm.subject<1){
      ElMessage.error('先选择学科，再获取');
      return false;
    }
    let params={
      pk:ruleForm.subject,
    }
    console.log("我要获取知识点了：",ruleForm.subject)
    axios.get('/GetKnowledgepointBySubjectApiView/',{params}).then(res => {
      console.log("获取知识点结果：",res)
      if (res.code==200){
        ElMessage.success('恭喜，获取知识点成功')
        state.knowledgepointList = deepClone(res.data.results)
        return true
      }else
      if(res.code==1099){
        ElMessage.error('参数错误，获取失败')
        return false
      }else{
        ElMessage.error('服务器错误')
      } 
    })
    .catch((error)=>{
      console.log("error:", error)
    })   
  }
  // 试卷的表单规则设定
  const rules = reactive({
    title: [
      { required: true, message: '请输入试卷标题', trigger: 'blur' },
      { min: 4, max: 50, message: '长度的合适范围是4-50字', trigger: 'blur' },
    ],
    open_level: [
      { required: true, message: '请选择公开方式', trigger: 'change', },
    ],
    publish_time: [
      { type: 'date', required: true, message: '选择日期', trigger: 'change', },      
    ],
    grade:[
      { required: true, message: '请选择年级段', trigger: 'change', },
      { pattern: /^[1-3]$/, message: '请选择年级', trigger: 'blur' }
    ],
    is_joint:[
      { required: true, message: '请选择类型',trigger: 'change', },
      { type:'boolean', message: '请选择类型', trigger: 'blur' }
    ],
    subject:[
      { required: true, message: '请选择学科', trigger: 'change', },
      { pattern: /^[1-3]$/, message: '请选择学科', trigger: 'blur' }
    ],
  })
  // 试题的表单规则
  const rules_for_question = reactive({
    content: [
      { required: true, message: '请输入试卷标题', trigger: 'blur' },
      { min: 4, max: 2000, message: '长度的合适范围是4-2000字', trigger: 'blur' },
    ],
    answer: [
      { required: true, message: '请选择公开方式', trigger: 'change', },
      { min: 1, max: 500, message: '长度的合适范围是4-2000字', trigger: 'blur' },
    ],
    explain: [
    { required: true, message: '请输入试卷标题', trigger: 'blur' },
      { min: 1, max: 2000, message: '长度的合适范围是4-2000字', trigger: 'blur' },
    ],
    knowledgepoint:[
      { required: true, message: '请选择年级段', trigger: 'change', },
      { pattern: /^[1-9]\d{0,3}$/, message: '请选择年级', trigger: 'blur' }
    ],
    type:[
      { required: true, message: '请选择题型',trigger: 'change', },
      { pattern: /^[1-4]$/, message: '请选择题型', trigger: 'blur' }
    ],
    bank_point:[
      { required: true, message: '请选择库币', trigger: 'change', },
      { pattern: /^[1-9]\d{0,1}$/, message: '请选择库币', trigger: 'blur' }
    ],
  })
  // 当富文本编辑器的题干内容发生变化
  const onEditorChange = (array, html) => {
    // console.log("选中的数组项",state.currentSelectQuestionIndex)
    // console.log("html：",html)
    state.paperQuestionList[state.currentSelectQuestionIndex].content=html
    // console.log('修改内容后数组',state.paperQuestionList)
  }
  // 当富文本编辑器的题干内容发生变化
  const onEditorAnswerChange = (array, html) => {
    state.paperQuestionList[state.currentSelectQuestionIndex].answer=html
  }
    // 当富文本编辑器的题干内容发生变化
  const onEditorExplainChange = (array, html) => {
    state.paperQuestionList[state.currentSelectQuestionIndex].explain=html
    // console.log('修改解析后数组',state.paperQuestionList)
  }

// 从富文本编辑器的上传图片，获得的图片写入题干数组mages
const appendImageToContentFromEditor=(image)=>{
  //  if(image!=''){
  //     state.paperQuestionList[state.currentSelectQuestionIndex].images.push(image)
  //  }
}
// 从富文本编辑器的上传图片，获得的图片写入答案图片数组mages
const appendImageToAnswerFromEditor=(image)=>{
  //  if(image!=''){
  //     state.paperQuestionList[state.currentSelectQuestionIndex].images_answer.push(image)
  //  }
}
// 从富文本编辑器的上传图片，获得的图片写入答案图片数组mages
const appendImageToExplainFromEditor=(image)=>{
  //  if(image!=''){
  //     state.paperQuestionList[state.currentSelectQuestionIndex].images_explain.push(image)
  //  }
}
  // 选择学科后，更新标题内容
  const subject_dic={1:'信息技术',2:'通用技术',3:'职高计算机'}
  const subjectChange=(value)=>{
    ruleForm.title = ruleForm.title+subject_dic[value]
  }
  // 选择类型后，更新表单的试卷类型
  const typeChange=(value)=>{
    if(value=='1'){
      ruleForm.is_joint = true
    }else{
      ruleForm.is_joint = false
    }
    console.log("修改后的类型",ruleForm.is_joint)
  }
  // 选择年级后，更新标题内容
  const grade_dic={1:'高一',2:'高二',3:'高三'}
  const gradeChange=(value)=>{
    console.log('根据年级更新标题',value)
    console.log("类型",ruleForm.is_joint)
    ruleForm.title = ruleForm.title+grade_dic[ruleForm.grade]
  }
  // 日期选择后，更新标题内容
  const dateChange=()=>{
    console.log('根据年月更新标题：',ruleForm.publish_time)
    ruleForm.title = ruleForm.title + ruleForm.publish_time.slice(0,4)+'年'+ruleForm.publish_time.slice(5,7)+'月'
  }
// 初始化数据,用于新建试卷，即开始隐藏试卷信息，显示试题信息
  const initQuestion_supply=()=>{
    state.paperQuestionList=[];
    state.paperQuestionList.push(createOneQuestion(1,1))
    state.questionVisible=true
    state.paperInfoVisible=false
  }
  // 初始化数据,用于新建试卷，即开始显示试卷信息，隐藏试题信息
  const initQuestion=()=>{
    state.paperQuestionList=[];
    state.paperQuestionList.push(createOneQuestion(1,1))
    state.questionVisible=false
    state.paperInfoVisible=true
  }
  // 试卷信息填写完后，隐藏试卷信息，显示录入试题组件
  const onAccomplishPaperInfoClick=()=>{
    ruleFormRef.value.validate((vaild, obj) => {
      if (vaild) {
        state.paperInfoVisible=false
        state.paperQuestionList.push(createOneQuestion(1,1))
        state.questionVisible=true        
        // console.log("转换之前的题目列表：",paperquestionList)
        ElMessage.success("试卷通过")
      //输出表单没有通过的原因  
      }else{                
        console.log("表单没有通过！",obj)
        for (let key in obj) {
          console.log(obj[key][0].message)
          return false;
        }
      }
    })
  }
  //检查所有题目的知识点是否都已经关联
  const verifyKnowledgepointLinkQuestion=(questionList)=>{
    let flag=true
    let index=-1
    for(let i=0;i<questionList.length;i++){
      if (questionList[i].knowledgepoint <=0){
        flag=false
        index=i
        break
      }
    }
    return [flag, index]
  }
  // 调整试题列表，去掉无关项
  const reformatQuestionList=(q_list)=>{    
    let deleteList=["answer_front", "content_front","explain_front","images","images_answer","images_explain","knowledgepoint_cn","type_cn","grade"]
    let uploadQuestionList=deepClone(q_list)
    for(let item of uploadQuestionList){
      item=convertQuestionFormat(item)
      // item=deleteQuestionItem(item,deleteList)
    }
    return uploadQuestionList
  }
  // 提交试卷和题目列表，持久化到数据库
  const submitForm =  () => {
    // console.log('转换之前',state.paperQuestionList)
     // 先检测是否所有题目都关联知识点
     let [ flag,index ]=verifyKnowledgepointLinkQuestion(state.paperQuestionList)
    index++;
    let s='第'+index.toString()+'题未关联知识点！'
    if (flag==false){
      ElMessage.error(s)
      return false
    }
    // 先重新从富文本编辑器中获取内容
    reGetHtmlFromRichEditorRef()
    // 调整所有题目的格式
    // let uploadQuestionList=reformatQuestionList(state.paperQuestionList)
    // 从试题列表中获取有用的题目属性
    console.log('从questionList中读取属性：', state.paperQuestionList)
    let uploadQuestionList = []
    for(let item of state.paperQuestionList){
      uploadQuestionList.push({     
        content: item.content,
        answer: item.answer,
        explain: item.explain,
        reference: item.reference,
        type: item.type,
        difficulty_level: item.difficulty_level,
        knowledgepoint: item.knowledgepoint,
        open_level: 'public',
        bank_point: item.bank_point
      })
    }
    let params={
      questionList:uploadQuestionList,
      type:'importQuestionsAndPaper',
      id:1,
      paperInformation:ruleForm,
    }
    let {id}=route.query
    if(parseInt(id)>0){
      params['id']=id
    }
    state.loading=true;
    state.submitButtonDisabeled=true;
    console.log('发送后端前的题目格式',uploadQuestionList)
    axios.post('/GeneratePaper2Database/', params).then((result) => {
      state.loading=false;      
      console.log("服务器返回提交结果：", result)
      if(result.code==200){
        ElMessage.success( '题目提交成功,去个人中心查看发布结果！')          
        var r=confirm("上传成功。是否去个人中心？");
            if (r==true){
                router.push("/userCenter/myCreatePaper")
            }else{
              initQuestion()
              router.go(0)
            }
      }else
      if(result.code==201){        
        ElMessage.error( '题目提交成功，申请上线失败，请联系管理员!')          
        var r=confirm("上传成功。是否去个人中心？");
            if (r==true){
                router.push("/userCenter/myCreatePaper")
            }else{
              initQuestion()
              router.go(0)
            }
      }else{
        ElMessage.error( '提交错误，请联系管理员!') 
      }
    })  
    .catch((error)=>{
      console.log("发送错误：", error)
    })  
  }

  //检测试卷名称是否重名
  const VerifyPaperTitle=()=>{
    axios.get('/VerifyPaperName/',{params:{paper_title:ruleForm.title}}).then(res => {
      if (res.code==200){
        ElMessage.success('恭喜，该标题可以使用^_^')
        return true
      }else{
        ElMessage.error('sorry，该标题已被使用*_*,请更换新标题')
        return false
      }        
    })
    .catch((error)=>{
      console.log("error",error)
    })
  }
  // 点击卡片设置当前被设置的题目索引号index
  const selectCardClick=(index)=>{
    state.currentSelectQuestionIndex=index
    // console.log("当前选中的索引：", index)
    // console.log('点击卡片后',state.paperQuestionList)
  }

</script>
<style scoped>
.card_questions{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: left;
}
.questionInfo{
  width: 900px;
  padding: 0;
  margin: 0;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin: 0;
    padding: 0;
    height: 20px;
  }
  .demo-rate-block {
  padding: 0 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  box-sizing: border-box;
}
.radio_type{
  padding: 0;
  display: inline-block;
}
.affix{
    width: 900px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-end;
    text-align: center;
}
.knowledgepointList{
    width: 900px;
    display: flex;
    flex-flow: row wrap;
    justify-content:left;
    align-items:flex-end; 
    background-color: rgb(228, 236, 239, 0.5);
}
.insert_questionsAffix{
  width: 600px;
  text-align: right;
}
.active {
  background-color:#ffffff!important;
  border: 1px solid #409EFF;
}
</style>